<template>
  <default-home-card icon="ProfileTwoTone" title="房管房产状态统计">
    <div class="echarts-box">
      <div class="category-main" id="category-main-tree"></div>
    </div>
  </default-home-card>
</template>
<script setup lang="ts">
  import DefaultHomeCard from '/@/views/system/home/default-home-card.vue';
  import { reportApi } from '/@/api/task/report-api';
  import * as echarts from 'echarts';
  import { onMounted } from 'vue';

  onMounted(() => {
    init();
  });

  async function init() {
    let res=await reportApi.getTreeChart();
    let option = {
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove'
    },
    legend: {
      top: '2%',
      left: '3%',
      orient: 'vertical',
      data: [
        {
          name: res.data[0].name,
          icon: 'rectangle'
        },
        {
          name: res.data[1].name,
          icon: 'rectangle'
        }
      ],
      borderColor: '#c23531'
    },
    series: res.data
  };
    let chartDom = document.getElementById('category-main-tree');
    if (chartDom) {
      let myChart = echarts.init(chartDom, null, {renderer: 'canvas', useDirtyRect: false});
      option && myChart.setOption(option);
    }
  }
</script>
<style lang="less" scoped>
  .echarts-box {
    display: flex;
    align-items: center;
    justify-content: center;
    .category-main {
      width: 100%;
      height: 800px;
      background: #fff;
    }
  }
</style>
